<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>百度文库评分</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		li{list-style: none;}
		a{text-decoration: none;}
		img{border: 0;vertical-align: top;}
		span{display: block;font:14px/45px "微软雅黑";color: #999;font-weight: bold;margin-left:20px;height: 45px;float: left;}
		ul{margin-top:12px;float: left;}
		strong{margin-top: 15px;margin-left: 20px;display: block;float: left;}
		li{list-style: none;float: left;width: 22px;
		height: 22px;margin-right: 3px;cursor: pointer;background: url(star-default.jpg);}
	</style>
	<script type="text/javascript"> 
		window.onload=function(){
			//思路：1)获取元素  2）在五个li里写入初始图  3）鼠标指到每个星星上时，星星变化  4）单击星星时图形的固定  5）鼠标划开之后恢复初始状态
			var oBox=document.getElementById("box");
			var aLi=oBox.getElementsByTagName("li");
			var aSpan=document.getElementsByTagName("span")[0];
			var arr1=["star-bad.jpg","star-default.jpg","star-good.jpg","JS21.jpg"]
			//将描述语言放进数组，方便引用
			var arr=["很不满意：差的太离谱，与卖家描述的严重不符，非常不满",
			"不满意：部分有破损，与卖家描述的不符，不满意",
			"一般：质量一般，没有卖家描述的那么好",
			"满意：质量不错，与卖家描述的基本一致，还挺满意的",
			"非常满意：质量非常好，与卖家描述的完全一致，非常满意"];
			var clickIndex = "";
			//遍历每个Li,添加初始图   初始图为背景图，无需添加
			/*for(var i=0;i<arr.length;i++){
				aLi[i].innerHTML="<img src='star-default.jpg' />";
			}*/
			//初始
			aSpan.innerHTML = "<img src = '"+arr1[3]+"' />";
			//遍历每个li，设置鼠标over  out以及点击状态

			for(var i=0;i<aLi.length;i++){
				aLi[i].index=i;
				aLi[i].onmouseover=function(){
					
					for(var j=0;j<aLi.length;j++){
						//初始化五个li
						aLi[j].style.background="url("+arr1[1]+")";
						
					}
					if(this.index>1){  //后三个星星
						for(var k=0;k<=this.index;k++){
							aLi[k].style.background="url("+arr1[2]+")";	
							aSpan.innerHTML=arr[this.index];
						}						
					}else{  //前两个星星
						for(var k=0;k<=this.index;k++){
							aLi[k].style.background="url("+arr1[0]+")";
							aSpan.innerHTML=arr[this.index];	
						}						
					}
				}
				aLi[i].onmouseout=function(){
					for(var j=0;j<aLi.length;j++){
						//初始化五个li
						aLi[j].style.background="url("+arr1[1]+")";
						aSpan.innerHTML = "<img src = '"+arr1[3]+"' />";
					}
					if(clickIndex===""){
						for(var j=0;j<aLi.length;j++){
						//初始化五个li
						aLi[j].style.background="url("+arr1[1]+")";
						aSpan.innerHTML = "<img src = '"+arr1[3]+"' />";
						}					
					}else{
						for(var i=0;i<=clickIndex;i++){  //点击星星的索引值
							if(clickIndex>1){
								aLi[i].style.background="url("+arr1[2]+")";	
								aSpan.innerHTML=arr[clickIndex];
							}else{
								aLi[i].style.background="url("+arr1[0]+")";
								aSpan.innerHTML=arr[clickIndex];							
							}						
						}					
					}					
				}
				//记录点击星星的索引值
				aLi[i].onclick=function(){
					clickIndex = this.index;
				}
			}
		}

	</script>
</head>
<body>
	<div class="wrap">
	<strong>总体评价 :</strong>	
	<ul id="box">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<span></span>
</div>
</body>
</html>